<template>
	<view>
		<image src="https://srmzln.oss-cn-hangzhou.aliyuncs.com/znl/images/bg.png"></image>
		<!-- 	<image src="https://srmzln.oss-cn-hangzhou.aliyuncs.com/znl/images/bg.png" mode="widthFix"></image> -->
		<u-popup v-model="show" mode="bottom" :overlay="true" :closeable="false" :mask-close-able="false">
			<view class='content'>
				<view class="tit">申请获取以下权限</view>
				<text class="des">获得你的公开信息(昵称，头像、地区等)</text>
			</view>
			<button class='bottom' type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN"
				@getuserinfo="wxGetUserInfo">授权登录</button>
		</u-popup>
		<u-popup v-model="show2" mode="bottom" :overlay="true" :closeable="false" :mask-close-able="false">
			<view class='content'>
				<view class="tit">申请获取以下权限</view>
				<text class="des">获得你的手机号码</text>
			</view>
			<button class='bottom uni-tip-button' type='primary' open-type="getPhoneNumber" withCredentials="true"
				lang="zh_CN" @getphonenumber="onGetPhoneNumber">允许</button>
		</u-popup>
		<!-- 	<view class="btn" v-if="!firstIn">
			<view class="binding" @click="binding">绑定</view>
			<view class="purchase" @click="buy">育儿指南</view>
		</view> -->
	<!-- 	<view class="bottom-btn-container">

			<view class="button" @click='binding'>
				绑定设备
			</view>
				<view class="button" @click='experience'>
				体验设备
			</view>
			<view class="button" @click='buy'>
				育儿科普
			</view>

		</view> -->
		<view class="bottom-button" style="width:100%;padding:26rpx;box-sizing: border-box;position: fixed;bottom:26px">
			<view class="" style="width:100%;border-radius: 17rpx;background-color: #fff;height:420rpx;padding:38rpx;box-sizing: border-box;">
				<view class="" style="display: flex;align-items: center;">
					<radio-group @change='radioChange' style="display: flex;width:30px">
						<label class="radio" >
							<radio value="" color="#4CD964"   :checked="isAgree" @click='agree' />
						</label>
					</radio-group>
					<view class="" >
						<view>我已仔细阅读并同意<text style="color: #007AFF;" @click="goPrivacy">《小程序隐私保护指引》</text></view>
					</view>
					
				</view>
				<view class="bottom" style="margin-top:14px" >
					<button @click='goCodeLogin' :class="!isAgree?'disable-btn':''"  :disabled="!isAgree" style="color:#fff;background-color: #007AFF;border-radius: 6px;">手机安全登录</button>
				</view>
				<view class="bottom" style="margin-top:16px" >
					<button open-type='getPhoneNumber' @getphonenumber='getPhoneNumber' :class="!isAgree?'disable-btn':''" :disabled="!isAgree" style="color:#fff;background-color: #4CD964;border-radius: 6px;">微信快速登录</button>
				</view>
				<view class="" style='width:100%;display: flex;justify-content:center;margin-top:12px' @click="goMy">
					暂不登录，继续体验
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				isAgree:false,
				title: 'Hello',
				firstIn: false,
				show: false,
				show2: false,
				baseInfo: {},
				phoneInfo: {},
				loginCode: '',
				code: '',
				postId: '',
				artileId: '',
				developer: '',
				no: '',
				isGetInfo:false
			}
		},
		computed: {
			...mapState(['wxuserInfo', 'isNewUser']),
		},
		onLoad(query) {
			console.log(query, 55)
			if (query.code) {
				this.code = query.code
				console.log(this.code, 44)
			}
			if (query.postId) {
				this.postId = query.postId

			}
			if (query.artileId) {
				this.artileId = query.artileId
			}
			if (query.developer) {
				this.developer = query.developer
			}
			if (query.no) {
				// uni.setStorageSync('code', query.no);
				 this.no = query.no
			}
			let zwxphone = wx.getStorageSync("zwxphone");
			let _this = this;
			if (zwxphone) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let tpl_param = {
					phone: zwxphone
				};
				_this.wxLogin(tpl_param);
			} else {
				  // this.show = true;
			}
		},



		methods: {
			agree(){
				if(!this.isGetInfo){
					this.show = true
					}
					this.isAgree = !this.isAgree
			},
			goCodeLogin(){
				// uni.navigateTo({
				// 	url:'../index/code-login/code-login'
				// })
				uni.navigateTo({
					url:'loginbycode/loginbycode?no='+this.no
				})
			// uni.navigateTo({
			// 	url:'../index/histroy/HistroyNot'
			// })
			},
			goMy(){
					uni.reLaunch({
						url:'../my/my'
					})
			},
			goPrivacy(){
				console.log(1234)
				uni.navigateTo({
					url:'../index/privacy/privacy'
				})
			},
			...mapMutations(['setWXUserInfo', 'setIsNewUser']),
			binding() {
				wx.reLaunch({
					url: 'binding/binding'
				})
			},
			async experience(e) {
				// uni.showLoading({
				// 	title: '加载中',
				// 	mask: true
				// });

				// this.$api.getTestDeviceCode().then(res => {
				// 	if (res.code === 200) {
				// 		let data = res.message
				// 		this.bindTestDevice(data)
				// 	}else{
				// 		uni.showToast({
				// 			title: '占无可体验设备！'
				// 		})
				// 	}
				// })

				if (!e) {
					return
				}

				this.$api.searchDeviceBinding({
					deviceCode: e
				}).then(res => {
					if (res.code === 200) {
						let data = res.result.personList
						if (data.length) {
							let tpl_param = {
								code: e,
								name: data[0].name,
								name2: '',
								sex: data[0].sex,
								height: data[0].height,
								weight: data[0].weight,
								datatime: data[0].birthday,
								index: 6,
								// icon: this.icon
							};

							this.$api.bindDevice(tpl_param).then(response => {
								uni.hideLoading();
								if (response.code == 200 || response.code === 500) {
									
									// const code = uni.getStorageSync('code');
									// if(code){
									// 	uni.clearStorageSync('code')
									// 	console.log(code,222)
									// }
									if (this.artileId) {
										uni.reLaunch({
											url: '../Parenting/Parenting'
										})
										return
									}
									uni.reLaunch({
										url:'../index/index'
									})
								}
							})
						}
					} else {
						uni.navigateTo({
							url: '/pages/login/binding/device/device?code=' +
								e
						})
					}
				})
			},
			bindTestDevice(code) {
				this.$api.searchDeviceBinding({
					deviceCode: code
				}).then(res => {
					if (res.code === 200) {
						let data = res.result.personList
						if (data.length) {

							let tpl_param = {
								code: data[0].deviceCode,
								name: data[0].name,
								name2: '',
								sex: data[0].sex,
								height: data[0].height,
								weight: data[0].weight,
								datatime: data[0].birthday,
								index: 6,
								// icon: this.icon
							};

							this.$api.bindDevice(tpl_param).then(response => {
								uni.hideLoading();
								if (response.code == 200 || response.code === 500) {
									if (this.artileId) {
										uni.reLaunch({
											url: '../Parenting/Parenting'
										})
										return
									}
									uni.reLaunch({
										url: '../index/index'
									})
								}
							})
						}
					}
				})
			},
			buy() {
				// wx.reLaunch({
				// 	url: '../index/index'
				// })

				uni.switchTab({
					url: '../Parenting/Parenting'
				})
			},

			//第一授权获取用户信息===》按钮触发
			wxGetUserInfo() {
				let _this = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log(loginRes);
						_this.loginCode = loginRes.code;
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								// _this.login(infoRes);
								_this.baseInfo = infoRes;
								_this.show = false;
								_this.isGetInfo = true
								// 弹窗获取手机信息
							
							},
							fail(res) {}
						});
					},
				});
			},
			onGetPhoneNumber(e) {
				let _this = this;

				if (e.detail && e.detail.errMsg == 'getPhoneNumber:ok') {
					_this.phoneInfo = e.detail;
					_this.show2 = false;
					_this.login();
					console.log(777)

				}
			},
			getPhoneNumber(e){
				let _this = this;
				if (e.detail && e.detail.errMsg == 'getPhoneNumber:ok') {
					_this.phoneInfo = e.detail;
			
					_this.login();
					console.log(777)
				
				}
			},
			radioChange(e){
				console.log(e)
			},
			//登录
			login() {
				let _this = this;
				let infoRes = this.baseInfo;
				let phoneInfo = this.phoneInfo;
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let tpl_param = {
					code: this.loginCode,
					userInfo: infoRes.userInfo,
					phoneInfo: phoneInfo
				};
				_this.wxLogin(tpl_param);
			},
			async wxLogin(tpl_param) {
				let _this = this;
				let res = await this.$api.wxlogin(tpl_param);
				console.info(tpl_param);
				if (res.code == 200) {
					this.setWXUserInfo({
						...tpl_param.userInfo,
						mobile: res.result.phone,
						token: res.result.token
					})
					wx.setStorageSync('zwxphone', res.result.phone);
					wx.setStorageSync('loginPageRedic', true);
						wx.setStorageSync('token',res.result.token)
			
	
					if (_this.developer) {
						const params = {
							developer: _this.developer
						}
						if (_this.postId) {
							params.posterNo = _this.postId
						}
						if (_this.artileId) {
							params.wzid = _this.artileId
						}
						_this.$api.bindDrcode(params).then(resp => {
							if (resp.code === 200) {
								uni.showModal({
									title: '绑软文二维码',
									content: '绑定成功！'
								});

							} else {
								uni.showModal({
									title: '绑软文二维码',
									content: resp.message
								});
							}
						})
					} else if (_this.postId) {
						_this.$api.bindDoctor({
							posterNo: _this.postId
						}).then(resp => {
							if (resp.code === 200) {
								// uni.showModal({
								// 	title: '绑定医生',
								// 	content: '医生绑定成功！'
								// });

							} else {
								uni.showModal({
									title: '绑定医生',
									content: resp.message
								});
							}
						})
					}
					let deviceRes = await this.$api.lastDeviceInfo()
					if (deviceRes.code === 200 || deviceRes.code === 204) {
						uni.reLaunch({
							url:'../index/index'
						})
						if (this.artileId) {
							uni.reLaunch({
								url: '../Parenting/Parenting'
							})
							return
						}
						// uni.reLaunch({
						// 	url: '../index/index'
						// })
					} else {
						// if (_this.postId) {
						// 	_this.experience()
						// }
						// const code = uni.getStorageSync('code');
						// console.log(222, code, 666)
						if (_this.no) {
							_this.experience(_this.no)
							return
						}else{
							uni.switchTab({
								url:'../my/my'
							})
						}
					}
				} else if (res.code === 201) {
					// this.show = true
				}
				uni.hideLoading();
			}
		}
	}
</script>

<style scoped lang="scss">
	.disable-btn{
		color:#F1F1F1 !important;
		background:#C0C0C0 !important;
	}
	.title_main {
		width: 750rpx;
		height: 150rpx;
		line-height: 200rpx;
		text-align: center;
		font-size: 18px;
	}

	.bottom-btn-container {
		width: 100%;
		position: fixed;
		bottom: 70rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 300rpx;
		z-index: 889;

		.button {
			margin-top: 20rpx;
			width: 630rpx;
			height: 70rpx;
			color: grey;
			line-height: 70rpx;
			text-align: center;
			font-size: 36rpx;
			border-radius: 8rpx;
			background-color: #fff;
		}
	}

	.btn {
		line-height: 80rpx;
		text-align: center;
		display: flex;
		padding: 30rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		background-color: #fff;
		color: #fff;
		font-size: 18px;
		position: fixed;
		top: 0;
		width: 750rpx;
	}

	.page-title {
		font-size: 18px;
	}

	.binding {
		height: 80rpx;
		border-radius: 10rpx;
		margin-right: 15rpx;
		background-color: #445CDF;
		flex: 1;
	}

	.purchase {
		height: 80rpx;
		border-radius: 10rpx;
		margin-left: 15rpx;
		background-color: #F7CB17;
		flex: 1;
	}

	image {
		width: 750rpx;
		height: 100vh;
	}

	.content {
		margin-left: 50rpx;
		margin-bottom: 90rpx;
	}

	.content {
		.tit {
			height: 60rpx;
			line-height: 60rpx;
			font-size: 18px;
			margin-top: 40rpx;
			display: block;
			margin-top: 40rpx;
		}

		.des {
			display: block;
			color: #9d9d9d;
			margin-top: 40rpx;
		}
	}
</style>
